<template>
  <div class="select-org-wrapper">
    <span class="search-condition-item-label"
          :title="attr.title">{{ attr.title ? attr.title : ''
    }}</span>
    <div class="search-condition-item-widget">
      <a-input v-model="text"
               :placeholder="attr.placeholder">
        <i slot="suffix"
           class="xicon-radio-people"></i>
      </a-input>
      <div class="select-org-mask"
           @click="selectPeople"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ScSelectOrg',
    props: {
      attr: {
        type: Object,
        default: {
          title: '',
          placeholder: '',
          isAdministrator: false,
          widgetParams: {
            attrs: {}
          }
        }
      },
      value: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        clickSelectText: $.i18n('collaboration.common.workflow.clickSelect'),
        text: this.value?.text || this.clickSelectText
      };
    },
    computed: {
      orgConfig() {
        return (
          this.attr?.widgetParams?.attrs || {
            panels: 'Department,Team,Post,Outworker,RelatePeople,OrgMetadataTag',
            selectType: 'Account,Department,Member,Team,Post,OrgMetadataTag',
            returnValueNeedType: true,
            showFlowTypeRadio: false,
            onlyLoginAccount: this.attr?.isAdministrator,
            showConcurrentMember: true
          }
        );
      }
    },
    watch: {
      value(newVal) {
        this.text = (newVal && newVal.text) || this.clickSelectText;
      }
    },
    methods: {
      selectPeople() {
        const {
          value,
          attr: { key },
          orgConfig
        } = this;
        const text = value?.text;
        const _value = value?.value;
        getCtpTop().$.selectPeople({
          type: 'selectPeople',
          panels: 'Department,Team,Post,Outworker,RelatePeople,OrgMetadataTag',
          selectType: 'Account,Department,Member,Team,Post,OrgMetadataTag',
          minSize: 0,
          text: $.i18n('common.default.selectPeople.value'),
          returnValueNeedType: true,
          showFlowTypeRadio: false,
          onlyLoginAccount: this.attr?.isAdministrator,
          showConcurrentMember: true,
          //是否显示兼职人员(只外单位)
          params: {
            text: text,
            value: _value
          },
          targetWindow: getCtpTop(),
          callback: (res) => {
            if (res && res.text) {
              this.$emit('valueChange', { key, value: res });
            } else {
              this.$emit('valueChange', {
                key,
                value: null
              });
            }
          },
          ...orgConfig
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  .select-org-wrapper {
    .search-condition-item-widget {
      cursor: pointer;
      position: relative;
      display: flex;

      .select-org-mask {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        background: transparent;
      }
    }

    .xicon-radio-people {
      color: #0077ff;
      color: var(--theme-brand5, #0077ff);
    }
  }
</style>
